<template>
	<view style="background-color: #70552d;color: #f3eacd;height: 100vh;position: relative;">
		<!-- 顶部安全距离 -->
		<view :style="{height: sConf.tH+'px'}"></view>
		<scroll-view scroll-y="true" style="padding: 10px; height: 100vh;" @scrolltolower="lastPage">


			<view v-for="(item, index) in tmpData" :key="index"
				style="padding: 15px;border-radius: 10px;background-color: #f3eacd;color: #111;margin-bottom: 10px;gap: 5px;">
				<view class="">业务流水号: {{item.reqsn}}</view>
				<view class="">金额: {{(item.price/100).toFixed(2)}}</view>
				<view class="">状态: <text :style="{color:covrState(item.status).color}">
						{{covrState(item.status).text}}</text></view>
				<view class="">时间: {{item.create}}</view>
				<view v-if="item.status > 1">审核: {{item.lasttime}}</view>
				<view v-if="item.status === 2">支付: {{item.paytime}}</view>
			</view>


			<!-- 底部安全距离 -->
			<view class="" style="height: 160px;"></view>
		</scroll-view>
		<view style="padding: 15px; position: absolute;left: 0;bottom: 0;width: 100vw;">
			<button class="gl-button-base" hover-class="gl-button-base-hover"
				style="display: flex;align-items: center;gap: 5px;justify-content: center;"
				@click="()=>{this.showPopup=true}">
				<tn-icon name="money" color="#fff" size="32"></tn-icon>
				<text style="font-size: small;">立即提现</text></button>
		</view>
		<!-- 顶部自定义导航 -->
		<tn-navbar :placeholder="true" fixed bg-color="#70552d" text-color="#f3eacd"> {{title}}</tn-navbar>
		<!-- popup模态窗口 -->
		<tn-popup v-model="showPopup" open-direction="bottom">
			<view class="" style="background-color: #fff;color: #111;padding: 10px;">
				<view style="display: flex;justify-content: space-between;align-items: center;padding-bottom: 15px;">
					<text style="font-weight: bold;">发起提现申请</text>
					<tn-icon name="close-square" size="64" color="#dd524d" @click="popClose"></tn-icon>
				</view>
				<view style="padding: 15px;">
					<tn-form :model="curData" label-position="top">
						<tn-form-item label="提现金额" prop="money">
							<tn-input custom-class="gl-base-input" v-model="curData.money" type="digit" clearable
								:placeholder="(curMaxMoney/100).toFixed(2)" @change="priceChange"></tn-input>
						</tn-form-item>
						<tn-form-item label="选择账户" prop="bank">
							<tn-input custom-class="gl-base-input" v-model="curData.bank" type="select"
								@click="()=>{this.showBankPicker=true}"></tn-input>
							<tn-picker v-model="curData.bid" v-model:open="showBankPicker" :data="allBanks"
								@confirm="bankChange"></tn-picker>
						</tn-form-item>
						<tn-form-item label="户名" prop="name">
							<tn-input custom-class="gl-base-input" v-model="curData.name" type="digit"
								disabled></tn-input>
						</tn-form-item>
						<tn-form-item label="开户行" prop="store">
							<tn-input custom-class="gl-base-input" v-model="curData.store" type="digit"
								disabled></tn-input>
						</tn-form-item>
						<tn-form-item label="卡号" prop="card">
							<tn-input custom-class="gl-base-input" v-model="curData.card" type="digit"
								disabled></tn-input>
						</tn-form-item>
					</tn-form>
				</view>
				<view style="padding: 15px;">
					<tn-checkbox v-model="agent">我已确认以上信息准确无误，愿意承担因信息错误导致的相关后果。</tn-checkbox>
				</view>
				<view style="padding: 15px;">
					<button class="gl-button-base" hover-class="gl-button-base-hover" :disabled="!agent"
						@click="submitForm">
						提交审核 </button>
				</view>
			</view>
		</tn-popup>
	</view>
</template>

<script>
	import psMethod from '@/common/psMethod'
	export default {
		data() {
			return {
				count: null, // 记录数
				size: 20, // 页大小
				page: 1, // 当前页
				maxPage: 1, // 最大数

				title: '用户提现',
				sConf: getApp().globalData,
				agent: false,
				showBankPicker: false,
				showPopup: false,
				myBankArray: [], // 原始数据
				allBanks: [], // picker数据
				curMinMoney: 0, // 最小提现金额
				curMaxMoney: 0, // 钱包余额
				curData: {
					bid: null,
					money: null,
					price: 0,
					bank: null,
					card: null,
					name: null,
					store: null,
				},
				tmpData: [], // 提现记录
			}
		},
		onReady() {
			if (!this.sConf.auth.auth) {
				uni.showModal({
					title: '实名认证',
					content: '用户提现需要先完成实名认证，是否继续?',
					success(r) {
						if (r.confirm) {
							uni.redirectTo({
								url: '/pagec/idcard/idcard'
							})
						} else {
							uni.navigateBack()
						}
					}
				})
			} else {
				this.loadConfMinWallet()
				this.loadBankList()
				this.loadWalletList()
				this.loadDefData()
			}
		},
		methods: {
			covrState(e) {
				let states = [{
					value: 0,
					text: '待审核',
					color: '#f0ad4e'
				}, {
					value: 1,
					text: '已审核',
					color: '#007aff'
				}, {
					value: 2,
					text: '已支付',
					color: '#4cd964'
				}, {
					value: -1,
					text: '已拒绝',
					color: '#dd524d'
				}]
				return states.find(item => item.value === e)
			},
			popClose() {
				this.agent = false
				this.showPopup = false
				this.curData = {
					bid: null,
					money: null,
					price: 0,
					bank: null,
					card: null,
					name: null,
					store: null,
				}

			},
			loadBankList() {
				let host = this.sConf.host + '/weapps/myBank/'
				let token = this.sConf.token
				let data = {
					sid: this.sConf.auth.id
				}
				psMethod.authenticatorGetSync(host, token, data).then(res => {
					console.log('加载银行卡', res);
					this.myBankArray = res.resmsg
					let tmpData = []
					res.resmsg.forEach(item => {
						tmpData.push({
							label: item.bank + " " + psMethod.zipCard(item.card),
							value: item.id
						})
					})
					this.allBanks = tmpData
				})
			},
			loadWalletList() {
				let host = this.sConf.host + '/weapps/wallet/'
				let token = this.sConf.token
				let data = {
					sid: this.sConf.auth.id
				}
				psMethod.authenticatorGetSync(host, token, data).then(res => {
					console.log('加载余额明细', res);
					// this.myBankArray = res.resmsg
					if (res.count > 0) {
						this.curMaxMoney = res.resmsg[0].amount
					}
				})
			},
			loadConfMinWallet() {
				let host = this.sConf.host + '/api/conf/'
				let token = this.sConf.token
				let data = {
					key: 'wallet_min_money'
				}
				psMethod.authenticatorGetSync(host, token, data).then(res => {
					console.log('加载最小提现金额', res);
					if (res.count > 0) {
						this.curMinMoney = Number(res.resmsg.find(item => item.key === 'wallet_min_money').value)
					}
				})
			},
			loadDefData() {
				console.log('loadDefData');
				let host = this.sConf.host + '/weapps/giveMoney/';
				let token = this.sConf.token || '';
				let data = {
					sid: this.sConf.auth.id,
					page: this.page,
					size: this.size,
					ordering: '-id'
				}
				psMethod.authenticatorGetSync(host, token, data).then((res) => {
					console.log('加载提现记录', res);
					if (res.rescode === 200) {
						if (this.page > 1) {
							this.tmpData = this.tmpData.concat(res.resmsg)
						} else {
							this.tmpData = res.resmsg
						}
						this.count = res.count
						this.size = res.size
						this.maxPage = Math.ceil(res.count / res.size)
					}
				})
			},
			/**
			 * 下一页
			 */
			lastPage() {
				console.log('lastPage');
				if (this.page < this.maxPage) {
					this.page++
					this.loadDefData()
				}
			},
			priceChange(e) {
				console.log('priceChange', e);
				this.curData.price = Math.ceil(e * 100)
			},
			bankChange(e) {
				console.log('bankChange', e);
				let bank = this.myBankArray.find(item => item.id === e)
				this.curData.bid = bank.id
				this.curData.bank = bank.bank
				this.curData.card = bank.card
				this.curData.name = bank.name
				this.curData.store = bank.store
			},
			submitForm() {
				if (!this.curData.bid) {
					uni.showToast({
						icon: 'error',
						title: '收款账户错误'
					})
					return
				}
				if (!psMethod.reprice(this.curData.money)) {
					uni.showToast({
						icon: 'error',
						title: '验证金额错误'
					})
					return
				}
				if (this.curData.price > this.curMaxMoney || this.curData.price < this.curMinMoney) {
					uni.showToast({
						icon: 'error',
						title: '计算金额错误'
					})
					return
				}

				let host = this.sConf.host + '/weapps/giveMoney/'
				let token = this.sConf.token
				let data = this.curData
				data.sid = this.sConf.auth.id
				psMethod.authenticatorPostSync(host, token, data).then(res => {
					console.log('提交用户提现申请', res);
					this.popClose()
					this.loadDefData()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>